<script setup lang="ts">
import { formatPrice } from '@/utils/mall'

interface Product {
  id: string
  name: string
  description?: string
  images: string[]
  defaultPrice: number
  originalPrice?: number
  sales?: number
  stock: number
  rating?: number
  reviewCount?: number
}

interface Props {
  product: Product
  layout?: 'grid' | 'list'
  showAddCart?: boolean
  showRating?: boolean
  showSales?: boolean
}

interface Emits {
  (e: 'click', product: Product): void
  (e: 'addCart', product: Product): void
}

withDefaults(defineProps<Props>(), {
  layout: 'grid',
  showAddCart: true,
  showRating: true,
  showSales: true
})

defineEmits<Emits>()
</script>

<template>
  <view 
    class="product-item" 
    :class="{ 'list-layout': layout === 'list' }"
    @click="$emit('click', product)"
  >
    <!-- 商品图片 -->
    <image 
      :src="product.images[0]" 
      class="product-image" 
      mode="aspectFit" 
    />
    
    <!-- 折扣标签 -->
    <view 
      v-if="product.originalPrice && product.originalPrice > product.defaultPrice" 
      class="discount-tag"
    >
      {{ Math.round((1 - product.defaultPrice / product.originalPrice) * 10) }}折
    </view>
    
    <!-- 商品信息 -->
    <view class="product-info">
      <text class="product-name">{{ product.name }}</text>
      <text v-if="product.description && layout === 'list'" class="product-desc">
        {{ product.description }}
      </text>
      
      <!-- 价格信息 -->
      <view class="product-price">
        <text class="current-price">{{ formatPrice(product.defaultPrice) }}</text>
        <text 
          v-if="product.originalPrice && product.originalPrice > product.defaultPrice" 
          class="original-price"
        >
          {{ formatPrice(product.originalPrice) }}
        </text>
      </view>
      
      <!-- 统计信息 -->
      <view v-if="showRating || showSales" class="product-stats">
        <view v-if="showRating && product.rating" class="rating">
          <wd-icon name="star-on" size="12px" color="#ffc107" />
          <text>{{ product.rating }}</text>
        </view>
        <text v-if="showSales && product.sales" class="sales">
          已售{{ product.sales }}+
        </text>
      </view>
    </view>
    
    <!-- 添加购物车按钮 -->
    <view 
      v-if="showAddCart" 
      class="add-cart-btn" 
      @click.stop="$emit('addCart', product)"
    >
      <wd-icon name="cart" size="16px" color="#fff" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.product-item {
  position: relative;
  background: white;
  border-radius: 8px;
  overflow: hidden;

  // 网格布局（默认）
  .product-image {
    width: 100%;
    height: 140px;
    background: #f8f9fa;
  }

  .discount-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #ff4142;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    z-index: 2;
  }

  .product-info {
    padding: 10px;

    .product-name {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 4px;
    }

    .product-desc {
      font-size: 12px;
      color: #666;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .product-price {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;

      .current-price {
        font-size: 16px;
        font-weight: bold;
        color: #ff4142;
      }

      .original-price {
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
      }
    }

    .product-stats {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .rating {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        color: #666;
      }

      .sales {
        font-size: 11px;
        color: #999;
      }
    }
  }

  .add-cart-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: var(--wot-color-theme);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 2;
  }

  // 列表布局
  &.list-layout {
    display: flex;
    align-items: center;
    padding: 12px;

    .product-image {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .discount-tag {
      top: 12px;
      left: 12px;
    }

    .product-info {
      flex: 1;
      padding: 0;
      margin-right: 12px;

      .product-name {
        font-size: 15px;
        -webkit-line-clamp: 2;
        margin-bottom: 6px;
      }

      .product-desc {
        -webkit-line-clamp: 2;
        margin-bottom: 8px;
      }

      .product-price {
        margin-bottom: 8px;

        .current-price {
          font-size: 18px;
        }

        .original-price {
          font-size: 13px;
        }
      }
    }

    .add-cart-btn {
      position: static;
      width: 36px;
      height: 36px;
      flex-shrink: 0;
    }
  }
}
</style>